<template>
  <el-container style="padding: 20px;">
    <el-main>
      <el-card>
        <el-row>
          <el-col :span="4">
            <img :src="productInfo.productPhoto" alt="Product Image" style="width: 100%; border-radius: 8px;" />
          </el-col>
          <el-col :span="18" style="margin-left: 30px;">
            <el-row>
              <el-col>
                <div>
                  <strong>生产批次：</strong>{{ productInfo.productionBatch }}
                </div>
                <div>
                  <strong>生产许可证号：</strong>{{ productInfo.licenseNumber }}
                </div>
                <div>
                  <strong>保质期：</strong>{{ productInfo.shelfLife }} 天
                </div>
                <div>
                  <strong>生产企业：</strong>{{ productInfo.enterprise }}
                </div>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-button type="primary">修改基本信息</el-button>
              <el-button type="default">导出溯源码</el-button>
            </el-row>
          </el-col>
        </el-row>
        
        <el-divider></el-divider>

        <div>
          <strong>产品检验报告：</strong>
          <el-upload
          style="margin-top: 10px"
            class="upload-demo"
            action=""
            list-type="picture-card"
           
          >
            <i class="el-icon-plus"></i>
            <div style="margin-top: 8px">上传文件</div>
          </el-upload>
        </div>
      </el-card>

      <el-container style="padding: 20px;">
        <el-main>
      <el-tabs>
        <el-tab-pane  label="养殖信息(1/5)">
          <el-main>
      <el-card>
        养殖信息&nbsp;
        <el-button type="primary" plain @click="logic.openBree = true">设置</el-button>
        <el-row style="margin-top: 10px;" >
          <el-col :span="10">
            <strong>品种：</strong>{{ Breeinfo.variety }}
          </el-col>
          <el-col :span="10">
            <strong>来源：</strong>{{ Breeinfo.soure }}
          </el-col>
          <el-col :span="10">
            <strong>饲养天数：</strong>{{ Breeinfo.myProperty }} 天
          </el-col>
          <el-col :span="10">
            <strong>饲料品牌：</strong>{{ Breeinfo.feeBrand }}
          </el-col>
          <el-col :span="10">
            <strong>饲料负责人：</strong>{{ Breeinfo.feeName }}
          </el-col>
          <el-col :span="10">
            <strong>出栏日期：</strong>{{ Breeinfo.relaseDate }}
          </el-col>
        </el-row>

        <el-divider></el-divider>

       
        <el-row>
          <el-col :span="10">
            保健信息 &nbsp;&nbsp;&nbsp;
            <el-button type="primary" @click="addHealth">添加保健信息</el-button>
          </el-col>
        </el-row>
        <el-table :data="healthvalue" style="width: 100%">
          <el-table-column  prop="feeDays" label="饲养天数" width="130"></el-table-column>
          <el-table-column prop="hCfs" label="保健方式" width="130"></el-table-column>
          <el-table-column prop="hCff" label="保健方法" width="130"></el-table-column>
          <el-table-column prop="HCfs" label="操作" width="250">
            <template #default="scope">
              <el-link type="primary" style="margin-right: 15px;" >修改</el-link>
              <el-link type="danger">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
        
        <el-form v-for="item in form.healthcareform.length" :modle="form.healthcareform" :inline="true">
          <el-input v-model="item.hCff" placeholder="饲养天数" style="width:110px;margin-right: 20px;margin-top: 10px;"></el-input>
          <el-input v-model="item.hCfs" placeholder="保健方式" style="width:110px;margin-right: 20px;margin-top: 10px;"></el-input>
          <el-input v-model="item.hCff" placeholder="保健方法" style="width:110px;margin-right: 20px;margin-top: 10px;"></el-input>
          <el-link type="primary" style="margin-top: 10px;margin-left: 13px;">保存</el-link>
          <el-link type="danger" style="margin-top: 10px;margin-left: 15px;" @click="delHealth(item.index)">删除</el-link>
        </el-form>

    

        <h3 style="margin-top: 20px;margin-bottom: 10px;">动态证</h3>
        <el-upload
          class="upload-demo"
          action=""
          list-type="picture-card"
         
        >
          <i class="el-icon-plus"></i>
          <div style="margin-top: 8px">上传文件</div>
        </el-upload>

        <el-divider></el-divider>

        <h3>企业信息</h3>
        <el-row>
          <el-col :span="12">
            <strong>养殖场：</strong>四川省凉山彝族自治州
          </el-col>
          <el-col :span="12">
            <strong>负责人：</strong>X总
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <strong>存养量：</strong>3200 只
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>

        <el-divider></el-divider>

        <h3>企业照片</h3>
        <el-upload
          class="upload-demo"
          action=""
          list-type="picture-card"
          
        >
          <i class="el-icon-plus"></i>
          <div style="margin-top: 8px">上传照片</div>
        </el-upload>
      </el-card>
          </el-main>
        </el-tab-pane>
        <el-tab-pane label="养殖信息(5/5)"></el-tab-pane>
        <el-tab-pane label="养殖信息(5/5)"></el-tab-pane>
      </el-tabs>

    </el-main>
  </el-container>
    </el-main>
  </el-container>

<!--养殖信息设置弹窗 -->
  <el-dialog v-model="logic.openBree  " title="养殖信息设置" width="500">
    <el-form  label-width="140px">
      <el-form-item label="品种" >
        <el-input v-model="breeform.variety" autocomplete="off" />
      </el-form-item>
      <el-form-item label="来源" >
        <el-input  v-model="breeform.soure"  autocomplete="soure" />
      </el-form-item>
      <el-form-item label="饲养天数" >
        <el-input  v-model="breeform.myProperty"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="饲料品牌" >
        <el-input  v-model="breeform.feeBrand"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="饲养负责人" >
        <el-input  v-model="breeform.feeName"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="出栏日期" >
        <el-date-picker  v-model="breeform.relaseDate"  type="date" placeholder="选择日期" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="logic.openBree = false">取消</el-button>
        <el-button type="primary" @click="addBree">确认</el-button>
      </div>
    </template>
  </el-dialog>




</template>

<script setup lang="ts">




 


//  :on-preview="handlePreview"
//             :on-remove="handleRemove"
import { ref,reactive,onMounted } from 'vue';
import axios from 'axios'
import { useRouter,useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';

const route=useRoute();

//逻辑对象
const logic=reactive({
  openBree:false,
  breecount:0,
})

const form:any=reactive({
  healthcareform:[]
})


//养殖信息的对象
const breeform=reactive({
  "breeId": 0,
  "prodountId": route.query.productInfoId,
  "variety": "",
  "soure": "",
  "myProperty": "",
  "feeBrand": "",
  "feeName": "",
  "relaseDate": "",
})

//保健信息对象



//养殖信息1
//#region 
//添加养殖信息
const addBree=()=>{
  let command=breeform;
  axios.post("http://localhost:5065/api/Management/AddBree",command).then(res=>{
    ElMessage.success(res.data.message)
    logic.openBree=false;
  })
}

//根据商品ID获取养殖信息
const Breeinfo:any=ref([]);
const getBreeInfo=()=>{
  axios.get("http://localhost:5067/api/Management/GetBreeFind",{
    params:{
      ProductInfoId: route.query.productInfoId
    }
  }).then(res=>{  
    Breeinfo.value=res.data.data;
      //获取养殖信息
      getBreeInfo()
      getHealthcare();
  })

}


//添加保健信息
const addHealth=()=>{
 form.healthcareform.push({
  hcId: 0,
  breeId: Breeinfo.breeId,
  feeDays: null,
  hCfs: "",
  hCff: "",
  isDeleted:true
  })  
}

//删除保健行信息
const delHealth=(index:number)=>{
  form.healthcareform.splice(index,1);
}


//获取保健信息
  const healthvalue:any=ref([]);
const getHealthcare=()=>{
  axios.get("http://localhost:5067/api/Management/GetHealthInfo",{
    params:{
      BreeId:Breeinfo.breeId
    }
  }).then(res=>{
    if(res.data.data.length>0){
      healthvalue.value = res.data.data;
    
    }
  })
}

const save=(row:any)=>{
  axios.post("http://localhost:5065/api/Management/AddHealthCare",row).then(res=>{
    console.log(res);
    ElMessage.success(res.data.message)
    getHealthcare();
  })
}



//#endregion






//获取单个产品信息
const productInfo:any=ref({})
const getFindProduct=()=>{
  let productId=route.query.productInfoId;
  
  // 发送请求获取产品信息
  axios.get("http://localhost:5067/api/Management/GetProductInfoFind",{
    params:{
      ProductInfoId:productId
    }
  }).then(res=>{
    productInfo.value=res.data.data
  })
}



onMounted(()=>{
  //获取单个产品信息
  getFindProduct()
  //获取养殖信息
  getBreeInfo()
})

</script>

<style scoped>
/* 你可以根据需要添加样式 */
.el-col{
  line-height: 50px;
}
</style>
